<template>
  <div :class="['PCViewVue']" :id="cls_id">
    <div class="view">

      <PingLayer></PingLayer>
      <div class="niao7"></div>
      <img class="niao1" src="img/c1.png">

      <div class="titleBtn" @click="backClick()">返回</div>
    </div>
  </div>
</template>


<style scoped>
.PCViewVue{
  font-size: 0.14rem;color: black;
 width: 100%;height: 100%;
}

.view{
  width: 100%;height: 100%;
}

.view .titleBtn{
  position: absolute;left: 0;top:0;background-image: url("../assets/img/p_u_i1.png");width: 0.31rem;height: 0.3rem;
}

.view .niao7{
  position: absolute;left: 3rem;top:2rem;background-image: url("../assets/img/c7.png");width: 1.18rem;height: 1.41rem;
}
.view .niao1{
  position: absolute;left: 5rem;top:2rem;width: 2.31rem;height: 1.88rem;
}


</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import PingLayer from "@/pages/pc/views/layer/PingLayer";



let store = useStore();
let cls_id=winApp.getClsId();

onMounted(() => {
  console.log("PCViewVue onMounted 初始化");
  initData();
});


onBeforeUnmount(() => {
  console.log('PCViewVue onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("PCViewVue onUnmounted 卸载组件实例后  ");
});

function initData(){
  windowSizeHandler();
  window.addEventListener('resize', function() {
    windowSizeHandler();
  });
}
let btnwidth=computed(()=>{return store.state.bodyWidth;});
watch(btnwidth,(newValue,oldValue)=>{
  //if(newValue>1200)newValue=1200;
  store.state.bodyWidth_rem=newValue/(window._windSize);
 // console.log("PCViewVue btnwidth  bodyWidth_rem ",store.state.bodyWidth_rem);
});



let windowSizeHandler=()=>{
  let bodyHeight = document.body.clientHeight;
  let viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  store.state.bodyHeight=(bodyHeight===0?viewportHeight:bodyHeight);

  let bodyWidth = document.body.clientWidth;
  let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  store.state.bodyWidth=(bodyWidth===0?viewportWidth:bodyWidth);

  store.state.bodyHeight_rem= store.state.bodyHeight/window._windSize;
  store.state.bodyWidth_rem=store.state.bodyWidth/window._windSize;
  //console.log('Body windowSizeHandler:', 'px:'+store.state.bodyWidth,store.state.bodyHeight, 'rem:'+store.state.bodyWidth_rem, store.state.bodyHeight_rem);
}



let backClick=()=>{
  let url='../../index.html';
  window.location.href=url;
}
</script>




